<template>
	<div id="">
		<div id="s" style="width: 90%; height: 100px; margin-left: 5%; line-height: 100px; border-bottom: dotted #000000;">
			<div style="float: right;">
				<el-button @click='dialogFormVisible=true' type="primary">添加餐桌</el-button>
				<el-dialog title="添加餐桌" :visible.sync="dialogFormVisible">
					<el-form :model="form" style="width: 400px; margin-left: calc(50% - 200px);">
						<el-form-item label="餐桌编号" :label-width="formLabelWidth">
							<el-input v-model="form.tid" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="餐桌容纳人数" :label-width="formLabelWidth">
							<el-input v-model="form.tnum" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="addtable">确 定</el-button>
					</div>
				</el-dialog>
			</div>
			<div id="cz" style="width: 50px;height: 50px; margin-right: 50px;float: right;">
				预定
			</div>
			<div id="cc" style="background-color: indianred; width: 20px; height: 20px; margin-top: 40px; margin-right: 10px;float: right;"></div>
			<div id="cz" style="width: 50px;height: 50px; margin-right: 10px;float: right;">
				有客
			</div>
			<div id="cc" style="background-color: coral; width: 20px; height: 20px; margin-top: 40px; margin-right: 10px;float: right;"></div>
			<div id="cz" style="width: 50px;height: 50px; margin-right: 10px;float: right;">
				空闲
			</div>
			<div id="cc" style="background-color: lightskyblue; width: 20px; height: 20px; margin-top: 40px; margin-right: 10px;float: right;"></div>
		</div>
		<div id="b" style="width: 100%; height: 770px;">
			<div class="bt">
				<div class="btr1">
					餐桌编号
				</div>
				<div class="btr2">
					容纳人数
				</div>
				<div class="btr2">
					订单状态
				</div>
				<div class="btr2">
					餐桌操作
				</div>
			</div>
			<div class="zt">
				<div :class="{'kkk0':status[index]==0, 'kkk1':status[index]==1,'kkk2': status[index]==2}" v-for="(t,index) in table">
					<div class="tid">{{t.tid}}号桌</div>
					<div class="tnum">{{t.tnum}}</div>
					<div class="ddzt">
						<el-button type="primary" round  @click="ckdd(t.tid)">查看订单信息</el-button>
						<el-dialog title="订单信息" :visible.sync="dialogTableVisible">
								<el-table :data="dd">
									<el-table-column property="vid.vname" label="菜名" width="200"></el-table-column>
									<el-table-column property="cou" label="数量" width="200"></el-table-column>
								</el-table>
						</el-dialog>
					</div>
					<div class="cz">
						<el-button type="info" icon="el-icon-phone" circle @click="dt(t.tid)"></el-button>
						<el-button type="warning" icon="el-icon-paperclip" circle @click="a(t.tid)"></el-button>
						<el-dialog title="更改餐桌状态" :visible.sync="dialogFormVisible1">
							<el-form :model="form1">
								<el-radio v-model="form1.radio" label=0>无人</el-radio>
								<el-radio v-model="form1.radio" label=1>有人</el-radio>
								<el-radio v-model="form1.radio" label=2>预定</el-radio>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogFormVisible1 = false">取 消</el-button>
								<el-button type="primary" @click="updatezt(tt)">确 定</el-button>
							</div>
						</el-dialog>
						<el-button type="danger" icon="el-icon-delete" circle @click="deltable(t.tid)"></el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogFormVisible: false,
				dialogFormVisible1:false,
				form: {
					tid: '',
					tnum: ''
				},
				form1:{
					radio:'1'
				},
				formLabelWidth: '120px',
				table: [],
				status: [],
				tt:'',
				dd:[],
				dialogTableVisible:false,
			}
		},
		created: function() {
			this.querytable();
		},
		methods: {
			addtable: function() {
				this.dialogFormVisible = false;
				this.$http.post('http://localhost:8080/OrderSystemServer/order/table/addtable', this.form)
					.then((response) => {
						console.log(response);
						if(response.data.isOK) {
							this.$message({
								type: 'success',
								message: '添加成功'
							});
						} else {
							this.$message({
								type: 'error',
								message: '添加失败，可能餐桌编号重复'
							});
						}
						this.querytable();
					});
			},
			querytable: function() {
				let s = [];
				this.$http.get("http://localhost:8080/OrderSystemServer/order/table/getalltable")
					.then((response) => {
						console.log(response);
						this.table = response.data.body;
						for(let i = 0; i < this.table.length; i++) {
							s.push(this.table[i].z.tstatus);
						}
						this.status = s;
						console.log(this.status);
					});
			},
			deltable: function(tid) {
				this.$http.get(`http://localhost:8080/OrderSystemServer/order/table/deltable?tid=${tid}`)
					.then((response) => {
						if(response.data.isOK) {
							this.$message({
								type: 'success',
								message: '删除成功'
							});
						} else {
							this.$message({
								type: 'error',
								message: '删除失败'
							});
						}
						this.querytable();
					});
			},
			updatezt: function(tid) {
				this.dialogFormVisible1 = false;
				//console.log(tid);
				//console.log(this.form1.radio);
				var tablezt={"tid":{"tid":tid},"tstatus":this.form1.radio};
				this.$http.post("http://localhost:8080/OrderSystemServer/order/table/tableupdatestatus",tablezt)
				.then((response)=>{
					console.log(response);
					if(response.data.isOK)
					{
						this.$message({
								type: 'success',
								message: '更改成功'
							});
					}
					this.querytable();
				});
				
			},
			a:function(tid){
				this.dialogFormVisible1 = true;
				//console.log(tid);
				this.tt=tid;
			},
			dt:function(tid){
				var tabledt={"tid":{"tid":tid},"tstatus":2};
				this.$http.post("http://localhost:8080/OrderSystemServer/order/table/tableupdatestatus",tabledt)
				.then((response)=>{
					console.log(response);
					if(response.data.isOK)
					{
						this.$message({
								type: 'success',
								message: '预定成功'
							});
					}
					this.querytable();
				});
			},
			ckdd:function(tid){
				console.log("11111")
				this.dialogTableVisible=true;
				this.$http.get(`http://localhost:8080/OrderSystemServer/Order/Order/getall?tid=${tid}`)
				.then((response)=>{
					this.dd=response.data.body;
				});
			}
		}
	}
</script>

<style>
	.bt {
		clear: both;
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 10px;
	}
	
	.btr1 {
		width: 130px;
		height: 50px;
		font-size: 18px;
		text-align: center;
		float: left;
		margin-left: 330px;
		color: dimgrey;
		//background-color: #545C64;
	}
	
	.btr2 {
		width: 130px;
		height: 50px;
		font-size: 18px;
		text-align: center;
		float: left;
		margin-left: 150px;
		color: dimgrey;
	}
	
	.zt {
		width: 1200px;
		height: 700px;
		margin-left: calc(50% - 600px);
		border-bottom: solid #696969;
		border-top: solid #696969;
		overflow: auto;
	}
	
	.kkk0 {
		/*没人*/
		width: 1000px;
		height: 100px;
		margin-left: calc(50% - 500px);
		margin-top: 5px;
		background-color: lightskyblue;
		border-radius: 20px;
	}
	
	.kkk1 {
		/*有人*/
		width: 1000px;
		height: 100px;
		margin-left: calc(50% - 500px);
		margin-top: 5px;
		background-color: coral;
		border-radius: 20px;
	}
	
	.kkk2 {
		/*有预定*/
		width: 1000px;
		height: 100px;
		margin-left: calc(50% - 500px);
		margin-top: 5px;
		background-color: indianred;
		border-radius: 20px;
	}
	
	.tid {
		width: 100px;
		height: 100px;
		margin-left: 20px;
		text-align: center;
		line-height: 100px;
		float: left;
		//background-color: #FF7F50;
	}
	
	.tnum {
		width: 100px;
		height: 100px;
		margin-left: 180px;
		text-align: center;
		line-height: 100px;
		float: left;
		//background-color: aqua;
	}
	
	.ddzt {
		width: 100px;
		height: 100px;
		margin-left: 170px;
		text-align: center;
		line-height: 100px;
		float: left;
	}
	
	.cz {
		width: 200px;
		height: 100px;
		margin-left: 130px;
		text-align: center;
		line-height: 100px;
		float: left;
	}
</style>